{% load i18n %}

{% if headers %}
<div class="container">
    <nav>
        <div class="nav nav-tabs mb-3" role="tablist" id="nav-tab">
            <button class="nav-link active" id="nav-preview-tab" data-bs-toggle="tab" data-bs-target="#nav-preview" type="button" role="tab" area-controls="nav-preview" aria-selected="true">{% trans "Preview" %}</button>
            {% if query.id and query.snapshot %}
                <button class="nav-link" id="nav-snapshots-tab" data-bs-toggle="tab" data-bs-target="#nav-snapshots" type="button" role="tab" area-controls="nav-snapshots" aria-selected="false">{% trans "Snapshots" %}</button>
            {% endif %}
            {% if data %}
                <button class="nav-link" id="nav-pivot-tab" data-bs-toggle="tab" data-bs-target="#nav-pivot" type="button" role="tab" area-controls="nav-pivot" aria-selected="false">{% trans "Pivot" %}</button>
                {% if charts_enabled %}
                    <button class="nav-link" id="nav-piechart-tab" data-bs-toggle="tab" data-bs-target="#nav-piechart" type="button" role="tab" area-controls="nav-piechart" aria-selected="false">{% trans "Pie Chart" %}</button>
                    <button class="nav-link" id="nav-linechart-tab" data-bs-toggle="tab" data-bs-target="#nav-linechart" type="button" role="tab" area-controls="nav-linechart" aria-selected="false">{% trans "Line Chart" %}</button>
                {% endif %}
            {% endif %}
        </div>
    </nav>
    <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane show active" id="nav-preview" role="tabpanel" area-labelledby="nav-preview-tab">
            <div role="tabpanel" class="tab-pane active" id="previewpane">
                <div class="card">
                    <div class="card-header">
                        <div class="row">
                            <div class="col">
                                {% if data %}
                                    <a title="Show row numbers" id="counter-toggle" href="#"><i class="bi-hash"></i></a>&nbsp
                                {% endif %}
                                {% blocktrans trimmed with duration=duration|floatformat:2 %}
                                    Execution time: {{ duration }} ms
                                {% endblocktrans %}
                            </div>
                            <div class="col text-end">
                                <span class="me-1">
                                    {% if rows > total_rows %}
                                        {% trans "Showing" %}&nbsp;
                                        <input class="rows-input" type="text" name="rows" id="rows"
                                               value="{{ total_rows }}"/>
                                    {% else %}
                                        {% trans "First" %}&nbsp;
                                        <input class="rows-input" type="text" name="rows" id="rows"
                                               value="{{ rows }}"/>
                                    {% endif %}
                                    {% blocktrans %}of {{ total_rows }} total rows.{% endblocktrans %}
                                </span>
                                <a id="fullscreen" href="./?{{ fullscreen_params }}" target="_blank"
                                   title="Fullscreen results">
                                    <i class="bi-arrows-angle-expand"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="overflow-wrapper">
                            <table class="table table-striped table-hover" id="preview">
                                <thead class="data-headers">
                                    <tr>
                                        <th class="preview-header counter" style="display: none;"></th>
                                        {% for h in headers %}
                                            <th class="preview-header"><span><i class="sort bi-chevron-expand pe-1" data-sort="{{ forloop.counter0 }}"
                                                         data-dir="asc"></i>{{ h }}</span></th>
                                        {% endfor %}
                                    </tr>
                                    {% if has_stats %}
                                        <tr class="stats-th">
                                            <th class="counter" style="display: none;"></th>
                                            {% for h in headers %}
                                                <th>
                                                    {% if h.summary %}
                                                        <i class="stats-expand bi-calculator"></i>
                                                        <table class="stats-wrapper table table-sm fw-normal small" style="display: none;">
                                                            {% for label, value in h.summary.stats.items %}
                                                                <tr>
                                                                    <td>{{ label }}</td>
                                                                    <td>{{ value }}</td>
                                                                </tr>
                                                            {% endfor %}
                                                        </table>
                                                    {% endif %}
                                                </th>
                                            {% endfor %}
                                        </tr>
                                    {% endif %}
                                </thead>
                                <tbody class="list">
                                    {% if data %}
                                        {% for row in data %}
                                        <tr class="data-row">
                                            <td class="counter" style="display: none;">{{ forloop.counter0 }}</td>
                                            {% for i in row %}
                                                {% if unsafe_rendering %}
                                                    <td class="{{ forloop.counter0 }}">
                                                        {% autoescape off %}{{ i }}{% endautoescape %}
                                                    </td>
                                                {% else %}
                                                    <td class="{{ forloop.counter0 }}">{{ i }}</td>
                                                {% endif %}
                                            {% endfor %}
                                        </tr>
                                        {% endfor %}
                                    {% else %}
                                        <tr class="text-center">
                                            <td colspan="{{ headers|length }}">
                                                {% trans "Empty Resultset" %}
                                            </td>
                                        </tr>
                                    {% endif %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% if query.id and query.snapshot and query.snapshots %}
            <div class="tab-pane" id="nav-snapshots" role="tabpanel" area-labelledby="nav-snapshots-tab">
                <h3>{{ snapshots|length }} Snapshots <small>(oldest first)</small></h3>
                <div class="overflow-wrapper">
                    <p>
                    <ul>
                        {% for s in snapshots %}
                            <li><a href='{{ s.url }}'>{{ s.last_modified }}</a></li>
                        {% endfor %}
                    </ul>
                    </p>
                </div>
            </div>
        {% endif %}

        {% if data %}
            <div class="tab-pane" id="nav-pivot" role="tabpanel" area-labelledby="nav-pivot-tab">
                <button id="button-excel">{% trans "Download as CSV" %}</button>
                <small>
                    <a id="pivot-bookmark"
                       data-baseurl="{% url 'explorer_playground' %}?querylog_id={{ ql_id }}"
                       href="#">
                        <i class="bi-link"></i>
                    </a>
                </small>
                <div class="overflow-wrapper">
                    <div class="pivot-table"></div>
                </div>
            </div>
            {% if charts_enabled %}
                <div class="tab-pane" id="nav-piechart" role="tabpanel" area-labelledby="nav-piechart-tab">
                    <div class="overflow-wrapper">
                        {% if pie_chart_svg %}
                            <div style="margin: 2em;">
                                {{ pie_chart_svg | safe }}
                            </div>
                        {% else %}
                            <div style="margin: 6em;">
                                <p>{% blocktrans %}
                                    This query result table is not formatted in a way
                                    which could be displayed as a pie chart.
                                {% endblocktrans %}</p>
                                <p>{% blocktrans %}
                                    Query results can be displayed as a pie chart as follows:
                                    each row represents one sector of the pie;
                                    the first column will be used as a label
                                    while the second column is used to determine the size of the sector.
                                    Thus the second column must be of a numeric type.
                                    Rows which contain <code>NULL</code>s will be ignored.
                                {% endblocktrans %}</p>
                                <p>{% blocktrans %}
                                    Use this sample query to see it in action:
                                {% endblocktrans %}</p>
                                <pre>
    SELECT *
    FROM (VALUES ('apple', 7),
                 ('orange', 8),
                 ('grape', 9),
                 ('peppermint', 1))
        AS fruit_salad_proportions;</pre>
                                </div>
                            {% endif %}
                        </div>
                </div>
                <div class="tab-pane" id="nav-linechart" role="tabpanel" area-labelledby="nav-linechart-tab">
                    <div class="overflow-wrapper">
                            {% if line_chart_svg %}
                                <div style="margin: 2em;">
                                    {{ line_chart_svg | safe }}
                                </div>
                            {% else %}
                                <div style="margin: 6em;">
                                    <p>{% blocktrans %}
                                        This query result table is not formatted in a way
                                        which could be displayed as a line chart.
                                    {% endblocktrans %}</p>
                                    <p>{% blocktrans %}
                                        Query results can be displayed as a line chart as follows:
                                        the first column represents the values on the x-axis (e.g. dates).
                                        All other numeric columns represent one line on the chart.
                                        Other columns will be ignored.
                                    {% endblocktrans %}</p>
                                    <p>{% blocktrans %}
                                        Use this sample query to see it in action:
                                    {% endblocktrans %}</p>
                                    <pre>
    SELECT *
    FROM (VALUES ('2019-01-01'::date, 500,550,530),
                 ('2020-01-01'::date, 530, 580, 570),
                 ('2021-01-01'::date, 580, 590, 670),
                 ('2022-01-01'::date, 700, 620, 780))
        AS fruit_salad_proportions(date, generosity, joy, happiness);</pre>
                                </div>
                            {% endif %}
                    </div>
                </div>
            {% endif %}
        {% endif %}
    </div>
</div>
{% endif %}
